<template>
    <div id="map">

    </div>
</template>

<script setup>
import mapboxGl from "mapbox-gl";
import { app } from '@/main';
import { onMounted } from 'vue';
onMounted(() => {
    const token = 'pk.eyJ1IjoibGF3Z3VvIiwiYSI6ImNsdXhrM3IzZTByMmIyaXBoYXAyMWg4bWMifQ.4o6GIEMhl0Aaef5TQfBIiQ';
    var { Scene, Mapbox } = L7
    const scene = new Scene({
        id: 'map',
        map: new Mapbox({
            style: "dark",
            center: [102.70, 25.04],
            zoom: 1,
            token,
            projection: "globe",
        }),
        logoVisible: false,
    })

    // 获取mapbox
    const map = scene.map
    map.on('style.load', () => {
        map.setFog({
            color: "#f7f7f7"
        })
    })

    // 获取地图
    app.provide('$map', map)
    app.provide('$scene', scene)

})
</script>

<style scoped lang="scss">
#map {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
}
</style>
